<div style="display: flex;width:100%;height:100%;" id="agenty-grafana-flowcharting">
  <section style="width:100%;height:100%;" id="flowcharting-section">
    <div class="flowchart-panel" id="flowcharting-panel"
      style="right: 0px; border: none; left: 0px; top: 0px; bottom: 0px; touch-action: none; overflow: auto; cursor: default;z-index: 1;-webkit-box-sizing:content-box;box-sizing:content-box">
      <div class="flowchart-panel-chart gf-unselectable" id="flowcharting-panel-content" ng-mouseenter="editor.onMouseIn($event)" ng-mouseleave="editor.onMouseOut($event)"
        style="overflow: hidden;position:relative;">
      </div>
    </div>

    <div id="flowcharting-message" class="gf-console">
      <div class="gf-message" id="flowcharting-message-content">
        <span id="message-text">This is a message</span>
      </div>
    </div>

    <div id="flowcharting-navigation" class="gf-navigation" ng-show="editor.displayMultiCursor();">
      <div id="flowcharting-navigation-content">
        <div style="float:left;padding-left:10px;cursor: pointer;" ng-show="editor.displayFirstCursor()"
          ng-click="editor.displayPreviousFlowchart()"><i class="fa fa-caret-left fa-lg"></i></div>
        <div style="float:right;padding-right:10px;cursor: pointer;" ng-show="editor.displayLastCursor()"
          ng-click="editor.displayNextFlowchart()"><i class="fa fa-caret-right fa-lg"></i></div>
      </div>
    </div>
    <div id="flowcharting-debug" class="gf-navigation" ng-show="$GF.DEBUG">
      <div id="flowcharting-navigation-content">
        <button class="btn btn-danger btn-small" ng-click="$GF.debug()" title="Debugger">
          &nbsp;Debug
      </button>
      </div>
    </div>

    <div id="flowcharting-mapping" ng-show="ctrl.onMapping" class="gf-mapping">
      <div style="margin: 0;position: absolute;top: 50%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%);" id="flowcharting-mapping-content">
        <span>Select Object to map</span>
        <button class="btn btn-danger btn-small" ng-click="$GF.enableMapping(false)" style="margin: 10px;">
          <img
            src="">
          &nbsp;Cancel
        </button>
      </div>
    </div>

  </section>
</div>
